<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

// 定义数据类型
interface OilWell {
  id: number; // 或 number，根据实际数据类型调整
  wellCode: string;
  wellName: string;
}

interface Valve {
  id: number; // 或 number，根据实际数据类型调整
  poolCode: string;
  poolName: string;
}

interface TubeData {
  id: number;
  pipeCode: string;
  pipeName: string;
  pipeType: string;
  length: string;
  depth: string;
  diameter: string;
  material: string;
  pressureRatin: string;
  remark: string;
  startPoint: string;
  endPoint: string;
  startPointFormatted: string;
  endPointFormatted: string;
  oilWellList: OilWell[];
  valvePoolList: Valve[];
  risk:string;
}

// 初始化 data 并指定类型
const data = ref<TubeData>({
  id: 0,
  pipeCode: '',
  pipeName: '',
  pipeType: '',
  length: '',
  depth: '',
  diameter: '',
  material: '',
  pressureRatin: '',
  remark: '',
  startPoint: '',
  endPoint: '',
  risk: '',
  startPointFormatted: '',
  endPointFormatted: '',
  oilWellList: [], // 明确类型为 OilWell[]
  valvePoolList: [], // 明确类型为 ValvePool[]
});

const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
  onCancel() {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData = modalApi.getData<Record<string, any>>();
      const actualData = modalData.data;
      console.log("actualData:", actualData);
      if (actualData) {
        const parsePoint = (point: string) => {
          const match = point.match(/POINT \(([-+]?\d*\.?\d+) ([-+]?\d*\.?\d+)\)/);
          if (match) {
            const longitude = match[1];
            const latitude = match[2];
            return `经度：${longitude}，纬度： ${latitude}`;
          }
          return '';
        };

        const startPointFormatted = parsePoint(actualData.startPoint);
        const endPointFormatted = parsePoint(actualData.endPoint);

        data.value = {
          ...data.value,
          ...actualData,
          startPointFormatted,
          endPointFormatted,
        };
      }
    }
  },
  title: '管线详情',
});
</script>
<template>
  <Modal>
    <div v-if="data">
      <!-- 显示指定的参数信息 -->
      <div>
        <p><strong>管线ID:</strong> {{ data.id }}</p>
        <p><strong>管线编号:</strong> {{ data.pipeCode }}</p>
        <p><strong>管线名称:</strong> {{ data.pipeName }}</p>
        <p><strong>管线类型:</strong> {{ data.pipeType }} </p>
        <p><strong>管线长度:</strong> {{ data.length }}米</p>
        <p><strong>管线深度:</strong> {{ data.depth }}米</p>
        <p><strong>管线直径:</strong> {{ data.diameter }}毫米</p>
        <p><strong>管线材质:</strong> {{ data.material }}</p>
        <p><strong>管线起始点坐标:</strong> {{ data.startPointFormatted }}</p>
        <p><strong>管线终止点坐标:</strong> {{ data.endPointFormatted }}</p>
        <p><strong>风险:</strong> {{ data.risk }}</p>
        <p><strong>备注:</strong> {{ data.remark }}</p>
      </div>
    </div>

    <!-- 打印空行 -->
    <br />
    <hr />
    <br />

    <!-- 居中显示 关联管道信息 -->
    <div>
      <p style="text-align: center; background-color: #333232;"><strong>关联油水井信息</strong></p>
    </div>
    <!-- 显示oilWellList中的数据中的管线编号，管线名称和一个序号-->
    <div class="oilWell-table">
      <div class="oilWell-header">
        <span class="oilWell-header-item">序号</span>
        <span class="oilWell-header-item">油水井编号</span>
        <span class="oilWell-header-item">油水井名称</span>
      </div>
      <div v-for="(oilWell, index) in data.oilWellList" :key="oilWell.id" class="oilWell-row">
        <span class="oilWell-item">{{ index + 1 }}.</span>
        <span class="oilWell-item">{{ oilWell.wellCode }}</span>
        <span class="oilWell-item">{{ oilWell.wellName }}</span>
      </div>
    </div>

    <!-- 打印空行 -->
    <br />
    <hr />
    <br />

    <hr />
    <!-- 居中显示 阀门信息 -->
    <div>
      <p style="text-align: center; background-color: #333232;"><strong>关联阀池信息</strong></p>
    </div>
    <!-- 显示valvePoolList中的数据中的管线编号，管线名称和一个序号-->
    <div class="oilWell-table">
      <div class="oilWell-header">
        <span class="oilWell-header-item">序号</span>
        <span class="oilWell-header-item">阀池编号</span>
        <span class="oilWell-header-item">阀池名称</span>
      </div>
      <div v-for="(valve, index) in data.valvePoolList" :key="valve.id" class="oilWell-row">
        <span class="oilWell-item">{{ index + 1 }}.</span>
        <span class="oilWell-item">{{ valve.poolCode }}</span>
        <span class="oilWell-item">{{ valve.poolName }}</span>
      </div>
    </div>



  </Modal>
</template>

<style scoped>
/* 这里可以添加一些CSS样式来美化Modal */
p {
  padding: 5px;
  margin: 0;
}

strong {
  margin-right: 10px;
}

.oilWell-table {
  border-collapse: collapse;
  width: 100%;
}

.oilWell-header,
.oilWell-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.oilWell-item {
  width: 33.33%;
  text-align: left;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

.oilWell-header-item {
  width: 33.33%;
  text-align: left;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  color: #ddd;
  /* 设置字体颜色为深灰色 */
  font-weight: bold;
}


.oilWell-header-item {
  font-weight: bold;
}
</style>
